<template>
  <open-modal :openModal='isShow' @closeModal='closeColumn'>
    <div class="c-bg-white c-br-tl20 c-br-tr20 c-pl40 c-pr40 c-hh730 c-flex-column c-p">
      <p class="c-textAlign-c c-fs28 c-fw500 c-pt30 c-flex-shrink0">目录</p>
      <div @click="closeColumn" class="c-pa c-p-r0 c-p-t0 c-ph20 c-pv20 c-fc-gray iconfont c-fs28">&#xeca0;</div>
      <ul class="c-liststyle-none task-list c-mt10 c-flex-1 c-pb30 c-contexty-scroll">
        <li v-for="(item, index) in lists" :key="index" @click="jumpToDetail(item)" class="c-flex-row c-aligni-center c-pv20">
          <span
            class="c-flex-shrink0 c-flex-row c-justify-center c-aligni-center c-fs20 c-ww56 c-hh32 c-fw500 c-fc-gray c-bd1 c-br16 c-mr10">{{item.relType== 500 ? '打卡':prodTypes[item.relType]}}</span>
          <div class="c-fs24 c-fc-xblack c-flex-1 c-text-ellipsis1">{{item.relName}}</div>
          <div class="c-flex-shrink0 schedule c-ml24">
            <div v-if="item.prodProgress == 1" class="schedule-complete theme-bg-10"><i class="iconfont c-fs22 theme-fc c-fw600 tick-icon">&#xe6ea;</i></div>
            <template v-else>
              <div class="schedule-bg"></div>
              <div class="schedule-percent">
                <div class="content left">
                  <div class="circle left-circle" :style="'transform:rotate('+`${item.leftDeg}`+'deg)'"></div>
                </div>
                <div class="content right">
                  <div class="circle right-circle" :style="'transform:rotate('+`${item.rightDeg}`+'deg)'"></div>
                </div>
              </div>
            </template>
          </div>
        </li>
      </ul>
    </div>
  </open-modal>
</template>
<script>
import { utilJs } from "@/utils/common.js";
import circleUtils from '@/utils/circleUtils.js';
import { goDetails } from "@/utils/goDetails.js";
import OpenModal from "@/components/templates/common/openModal.vue";
export default {
  name: 'learnColumn',
  components: {
    OpenModal
  },
  props: {
    planId: { //计划ID
      type: Number,
      default: 0
    },
    circleId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      isShow: false,
      lists: [],
      prodTypes: global.prodMapType,
    }
  },
  watch: {
    isShow: function (newVal) {
      if (newVal && !this.lists.length) {
        this.getList();
      }
    }
  },
  methods: {
    open() {
      this.isShow = true;
    },
    close() {
      this.isShow = false;
    },
    getList() {
      return new Promise(resolve => {
        utilJs.getMethod(`${global.apiurl}circle/getPlanProd/${this.planId}`, res => {
          res.forEach(item => {
            let resRatio = circleUtils.calcProgressRatio(item.prodProgress);
            item.leftDeg = resRatio.leftDeg;
            item.rightDeg = resRatio.rightDeg;
          })
          this.lists = res;
          resolve(res);
        })
      })
    },
    jumpToDetail(item) {
      console.log("jumpToDetail", item);
      this.closeColumn();
      if (item.relId == this.clockinId) return;
      if (item.relType == 500) {
        this.$routerGo(this, "replace", {
          path: "/homePage/circle/circlePlanClockinDetail",
          query: {
            circleId: this.circleId,
            clockinId: item.relId,
          }
        })
      } else {
        let courseType = item.relType == 111 ? 1 : item.relType == 112 ? 2 : 0;
        let prodType = item.relType == 110 || item.relType == 111 || item.relType == 112 ? global.ckFrom.course : item.relType;
        goDetails(this, prodType, item.relId, { circleId: this.circleId, circlePlanId: this.planId }, courseType);
      }
      circleUtils.addPlanMember(this.circleId, this.planId);
    },
    closeColumn() {
      this.isShow = false;
      this.$emit("onClose")
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../../assets/css/scss/circle.scss";
</style>